7<!-- 添加商品 -->
<template>
  <div>
    <head-top shop-text="添加商品" shop-btn-text="刷新"></head-top>
    <section id="main">
      <div class="head">
        <span>添加商品</span>
      </div>
      <!-- 基本信息 -->
      <div class="info">
        <p>基本信息</p>

        <!-- 信息添加 -->
        <div>
          <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item prop="articleNumber">
              <template>
                <div slot="label">
                  <span class="star">商品货号</span>
                </div>
                <el-input v-model="formData.articleNumber" placeholder="例：sku123456"></el-input>
              </template>
            </el-form-item>

            <el-form-item prop="prodName">
              <template>
                <div slot="label">
                  <span class="star">商品名称</span>
                </div>
                <el-input v-model="formData.prodName" placeholder="例：水杯"></el-input>
              </template>
            </el-form-item>

            <!-- 商品分类 -->
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">商品分类</span>
                </div>
              </template>
              <el-select v-model="classifyOne" placeholder="请选择一级分类" @change="changeSelect">
                <el-option v-for="item in classifyOneList" :key="item.categoryId" :label="item.categoryName"
                  :value="item.categoryId"></el-option>
              </el-select>
              ~
              <el-select v-model="classifyTwo" placeholder="请选择二级分类">
                <el-option v-for="item in classifyTwoList" :key="item.categoryId" :label="item.categoryName"
                  :value="item.categoryId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">支付方式</span>
                </div>
              </template>
              <el-select placeholder="请选择支付方式" v-model="formData.payType">
                <el-option v-for="item in payTypeList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">供应商</span>
                </div>
              </template>
              <el-input v-model="formData.supplier" placeholder="例：浙江温州江南皮革厂"></el-input>
            </el-form-item>

            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">品牌</span>
                </div>
              </template>
              <el-input v-model="formData.brand" placeholder="例：杂牌"></el-input>
            </el-form-item>

            <!-- 封面图片 -->
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">封面图片</span>
                </div>
              </template>
              <el-upload action="http://172.16.104.83:8080/assets" list-type="picture-card" :auto-upload="false"
                :show-file-list="true" :file-list="coverImgList" :on-change="beforeUpload">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <span class="hint">（图片尺寸为200*200，单位像素，不超过10M，支持PNG、JPEG、JPG格式）</span>
            </el-form-item>

            <!-- 详情图片 -->
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">详情图片</span>
                </div>
              </template>
              <el-upload action="http://172.16.104.83:8080/assets" list-type="picture-card" :auto-upload="false"
                :multiple="true" :show-file-list="true" :file-list="detailImgList" :on-change="beforeUpload2">
                <!-- :on-preview="handlePictureCardPreview" -->
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <span class="hint">（图片尺寸为400*400，单位像素，不超过10M，支持PNG、JPEG、JPG格式）</span>
            </el-form-item>

            <el-form-item label="视频URL">
              <el-input v-model="formData.videoUrl"
                placeholder="例：http://tv.cctv.com/2023/04/10/VIDEIoYTy6Go1WXKDuq1EQwU230410.shtml"></el-input>
            </el-form-item>

            <el-form-item label="是否包邮">
              <el-switch :value="formData.isDelivery == '1'" active-color="#13ce66" inactive-color="#ff4949"
                @change="isGrounding">
              </el-switch>
            </el-form-item>
            <el-form-item label="销量">
              <el-input v-model="formData.soldNum" placeholder="例：200"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 商品报价 -->
        <div>
          <div class="infoHead">
            <p></p>
            <p>商品报价</p>
            <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
          </div>
          <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="index" label="序号"> </el-table-column>
            <el-table-column prop="kinds" label="商品类型"> </el-table-column>
            <el-table-column prop="size" label="尺码"> </el-table-column>
            <el-table-column prop="modelId" label="条形码"> </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="oriPrice" label="市场价"> </el-table-column>
            <el-table-column prop="actualStocks" label="库存">
            </el-table-column>
            <el-table-column prop="pic" label="图片">
              <template v-slot="scoped">
                <el-image style="width: 100px; height: 100px" :src="scoped.row.pic"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template v-slot="scoped">
                <span @click="delBtn(scoped.row.index)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 商品参数 -->
        <div>
          <div class="infoHead">
            <p></p>
            <p>商品参数</p>
            <el-button type="primary" @click="dialogFormVisibleTwo = true">添加</el-button>
          </div>
          <el-table :data="tableDataTwo" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="serialNumber" label="序号">
            </el-table-column>
            <el-table-column prop="parameterType" label="参数类型">
            </el-table-column>
            <el-table-column prop="parameterEntry" label="录入参数" width="800px">
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template v-slot="scoped">
                <span @click="delBtnTwo(scoped.row.serialNumber)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="shopDetail">
          <div class="infoHead">
            <p></p>
            <p>商品详情</p>
            <p></p>
          </div>
          <textarea v-model="content" placeholder="例：莆田鞋6666666666666666666"></textarea>
        </div>

        <el-button type="primary" @click="AddPhoto">提交</el-button>
      </div>

      <!-- 添加商品报价的模态框 -->
      <el-dialog title="商品报价" :visible.sync="dialogFormVisible" width="35%" top="5vh">

        <el-form :model="tableDialogOne">
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="tableDialogOne.index" autocomplete="off" placeholder="例：1"></el-input>
          </el-form-item>
          <el-form-item label="商品类型" :label-width="formLabelWidth">
            <el-input v-model="tableDialogOne.kinds" autocomplete="off" placeholder="例：服饰、水产、五金、化工、食品等"></el-input>
          </el-form-item>
          <el-form-item label="尺码" :label-width="formLabelWidth">
            <el-input v-model="tableDialogOne.size" autocomplete="off" placeholder="例：XL或尺码大小"></el-input>
          </el-form-item>
          <el-form-item label="条形码" :label-width="formLabelWidth">
            <el-input v-model="tableDialogOne.modelId" autocomplete="off" placeholder="例：T202304101123"></el-input>
          </el-form-item>
          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="tableDialogOne.price" autocomplete="off" placeholder="例：500"></el-input>
          </el-form-item>
          <el-form-item label="市场价" :label-width="formLabelWidth">
            <el-input v-model="tableDialogOne.oriPrice" autocomplete="off" placeholder="例：500"></el-input>
          </el-form-item>
          <el-form-item label="库存" :label-width="formLabelWidth">
            <el-input v-model="tableDialogOne.actualStocks" autocomplete="off" placeholder="例：500"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <template>
              <div slot="label">
                <span class="star">上传图片</span>
              </div>
            </template>
            <el-upload action="http://172.16.104.83:8080/assets" list-type="picture-card" :auto-upload="false"
              :show-file-list="showList" :on-change="beforeUpload3">
              <i class="el-icon-plus"></i>
            </el-upload>
            <span class="hint">（图片尺寸为200*200，单位像素，不超过10M，支持PNG、JPEG、JPG格式）</span>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTableOneUpload">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 添加商品参数的模态框 -->
      <el-dialog title="商品报价" :visible.sync="dialogFormVisibleTwo" width="35%" top="25vh">
        <el-form :model="tableDialogTwo">
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="tableDialogTwo.serialNumber" autocomplete="off" placeholder="例：1"></el-input>
          </el-form-item>
          <el-form-item label="参数类型" :label-width="formLabelWidth">
            <el-input v-model="tableDialogTwo.parameterType" autocomplete="off"
              placeholder="例：上市年份、适用对象、价格区间、商品系列等"></el-input>
          </el-form-item>
          <el-form-item label="录入参数" :label-width="formLabelWidth">
            <el-input v-model="tableDialogTwo.parameterEntry" autocomplete="off"
              placeholder="例：2018、不限、100-999、莆田系列等"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleTwo = false">取 消</el-button>
          <el-button type="primary" @click="addTableTwo">确 定</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>

<script>
import HeadTop from "@/components/Shop/HeadTop.vue";
import { mapActions } from "vuex";
export default {
  name: "addShop",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      showList: true,
      formLabelWidth: "120px",
      dialogFormVisible: false, //添加表格一的模态框显示
      dialogFormVisibleTwo: false, //添加表格二的模态框显示
      value: true, //包邮按钮
      coverImgList: [], //封面图片列表
      detailImgList: [], //详情图片列表
      imgFile: [], //保存文件数据
      upDetailList: [], //上传的详情图片列表
      upCoverList: [], //  上传的封面图片列表
      // 第一个表里面数据  绑定模态框和表显示
      classifyOne: "", //选择的一级分类
      upFileList: [],
      classifyTwo: "", //选择的二级分类
      formData: {
        articleNumber: "", //商品货号
        prodName: "", //商品名称
        categoryId: "", //分类id
        payType: "", //
        supplier: "", //供应商
        brand: "", //品牌
        pic: "", //封面图片的url
        imgs: [], //详情图片的url数组
        soldNum: "", //销量
        videoUrl: "", //视频url
        isDelivery: 1, //是否包邮
      },
      content: "", //商品详情
      payTypeList: [
        //支付方式列表
        { label: "手动代付", value: 0 },
        { label: "微信支付", value: 1 },
        { label: "支付宝", value: 2 },
      ],
      classifyOneList: [], //一级分类列表
      classifyTwoList: [], //二级分类列表
      tableData: [],
      //表格一的模态框数据
      tableDialogOne: {
        // 商品报价
        index: "",
        kinds: "",
        size: "",
        modelId: "",
        price: "",
        oriPrice: "",
        actualStocks: "",
        pic: "",
      },
      // 第二个表里面的数据  绑定模态框和表显示
      tableDataTwo: [],
      tableDialogTwo: {
        //商品参数
        serialNumber: "",
        parameterType: "",
        parameterEntry: "",
      },
    };
  },

  created() {
    this.getAllClass();
  },
  mounted() { },

  methods: {
    ...mapActions("shop", [
      "GetAllClass",
      "UploadFile",
      "UploadFiles",
      "AddShopInfo",
    ]),

    addTableTwo() {
      this.dialogFormVisibleTwo = false;
      this.tableDataTwo.push(this.tableDialogTwo);
      this.tableDialogTwo = {};
    },

    addTableOneUpload() {
      let file = new FormData();
      this.imgFile = this.upFileList.shift();
      file.append("imgFile", this.imgFile);
      console.log("file", file);
      this.UploadFile({ file: file.get("imgFile") }).then((res) => {
        console.log(res.data.data);
        this.tableDialogOne.pic = res.data.data;
        this.addTableOne();
      });
    },

    addTableOne() {
      console.log(1);
      this.dialogFormVisible = false;
      this.tableData.push(this.tableDialogOne);
      this.tableDialogOne = {};
      // this.showList = false;
    },

    // 添加商品
    addShop() {
      this.formData.categoryId = this.classifyTwo;
      let prod = this.formData;
      let sku = this.tableData;
      let prodParameters = this.tableDataTwo;
      let content = this.content;
      console.log("添加的表单数据", prod);
      console.log("添加的第一个表格的数据", sku);
      console.log("添加的第二个表格的数据", prodParameters);
      console.log("添加的商品详情数据", content);

      // 发起添加商品的请求
      this.AddShopInfo({ prod, sku, prodParameters, content }).then((res) => {
        this.$message("添加商品成功，请等待审核");
        this.tableData = this.tableDataTwo = this.formData = this.content = "";
      });
    },

    delBtn(delId) {
      let id = delId;
      for (let i = 0; i < this.tableData.length; i++) {
        if (id == this.tableData[i].index) {
          this.$message("删除成功");
          this.tableData.splice(i, 1);
        }
      }
      console.log("fdsafds", id);
    },

    delBtnTwo(delId) {
      let id = delId;
      for (let i = 0; i < this.tableDataTwo.length; i++) {
        if (id == this.tableDataTwo[i].serialNumber) {
          this.$message("删除成功");
          this.tableDataTwo.splice(i, 1);
        }
      }
    },

    // 添加图片  获取图片在线地址
    AddPhoto() {
      // 上传图片
      let files = new FormData();
      for (let i = 0; i < this.upCoverList.length; i++) {
        files.append("files", this.upCoverList[i]);
      }
      // //这是多文件上传接口发送请求
      this.UploadFiles(files).then((res) => {
        this.formData.pic = res.data.data[0];
        // 获取封面图片路径成功之后再发起请求去获取详情图片的路径
        let files = new FormData();
        for (let i = 0; i < this.upDetailList.length; i++) {
          files.append("files", this.upDetailList[i]);
        }
        this.UploadFiles(files).then((res) => {
          for (let i = 0; i < res.data.data.length; i++) {
            this.formData.imgs.push({ fileUrl: res.data.data[i], isHead: 0 });
          }
          this.addShop();
        });
      });
    },

    //点击一级分类显示对应二级分类
    changeSelect(value) {
      //value是一级分类的id值
      //先遍历所有的分类，里面包含一级和二级
      for (var i = 0; i < this.classifyOneList.length; i++) {
        //每个一级分类
        var oneClassify = this.classifyOneList[i]; //判断所有一级分类id和点击一级分类id是否一样
        if (value === oneClassify.categoryId) {
          //从一级分类中获取所有二级分类
          this.classifyTwoList = oneClassify.children;
          this.classifyTwo = "";
        }
      }
    },

    //限制上传文件类型
    beforeUpload(file, coverImgList) {
      // 判断文件的类型和文件大小
      // 获取文件的后缀名
      let res = file.name.split(".")[file.name.split(".").length - 1];
      let arr = ["png", "jpg", "jpeg"];
      if (!arr.includes(res)) {
        return this.$message.error(
          "上传头像图片只能是 jpg 格式或者 png 格式或者 jpeg 格式"
        );
      }
      // 判断文件大小
      if (file.size / 1024 / 1024 > 2) {
        return this.$message.error("文件大小不能超过2M");
      }

      //在添加商品调用的时候，必须先
      this.upCoverList = [];
      for (let x of coverImgList) {
        if (x.raw) {
          this.upCoverList.push(x.raw);
        }
      }
    },
    beforeUpload2(file, detailImgList) {
      // 判断文件的类型和文件大小
      // 获取文件的后缀名
      let res = file.name.split(".")[file.name.split(".").length - 1];
      let arr = ["png", "jpg", "jpeg"];
      if (!arr.includes(res)) {
        return this.$message.error(
          "上传头像图片只能是 jpg 格式或者 png 格式或者 jpeg 格式"
        );
      }
      // 判断文件大小
      if (file.size / 1024 / 1024 > 2) {
        return this.$message.error("文件大小不能超过2M");
      }

      //在添加商品调用的时候，必须先
      this.upDetailList = [];
      for (let y of detailImgList) {
        console.log("y", y);
        if (y.raw) {
          this.upDetailList.push(y.raw);
        }
        console.log("this.upDetailList", this.upDetailList);
      }
    },

    //限制上传文件类型
    beforeUpload3(file, fileList) {
      // 判断文件的类型和文件大小
      // 获取文件的后缀名
      let res = file.name.split(".")[file.name.split(".").length - 1];
      let arr = ["png", "jpg", "jpeg"];
      if (!arr.includes(res)) {
        return this.$message.error(
          "上传头像图片只能是 jpg 格式或者 png 格式或者 jpeg 格式"
        );
      }
      // 判断文件大小
      if (file.size / 1024 / 1024 > 2) {
        return this.$message.error("文件大小不能超过2M");
      }

      //在添加商品调用的时候，必须先
      this.upFileList = [];
      console.log("coverImgList的长度", fileList.length);
      for (let x of fileList) {
        console.log("x", x);
        if (x.raw) {
          this.upFileList.push(x.raw);
        }
        console.log("this.upCoverList", this.upFileList);
      }
    },
    // 获取分类列表
    getAllClass() {
      this.GetAllClass().then((res) => {
        this.classifyOneList = res;
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 是否包邮按钮事件
    isGrounding() {
      this.formData.isDelivery = this.formData.isDelivery == 0 ? 1 : 0;
      console.log(this.formData.isDelivery);
    },
  },
  components: {
    HeadTop,
  },
};
</script>

<style scoped>
.el-input {
  width: 300px !important;
}

.shopDetail {
  width: 90%;
  margin: auto;
}

.shopDetail textarea {
  width: 100%;
  height: 300px;
  resize: none;
}

/* 头部 */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
}

.left {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}

.right button {
  margin-right: 20px;
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

/* 主体 */
#main {
  width: 96%;
  margin: auto;
}

.head {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #e4e4e4;
  margin-top: 25px;
}

.head span {
  margin-left: 20px;
}

.info p {
  text-align: center;
  margin: 20px 0 30px 0;
  color: #999;
}

.info {
  border: 1px solid #e4e4e4;
}

.el-input {
  width: 206px;
}

.star::before {
  color: red;
  content: "*";
}

.info>div form {
  margin: auto;
  width: 70%;
}

/* 提示信息的字体颜色 */
.hint {
  color: #999;
  font-size: 12px;
}

/* 商品报价 */
::v-deep .has-gutter tr th {
  background-color: #f5f5ff;
  text-align: center;
}

::v-deep .el-table_1_column_9 .cell,
.el-table_2_column_13 .cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .el-table_1_column_9 .cell span,
.el-table_2_column_13 .cell span {
  color: skyblue;
  text-decoration: none;
  font-size: 12px;
}

.info>button {
  display: block;
  margin: 30px auto;
}

.infoHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.infoHead p {
  width: 80px;
}

.infoHead button {
  height: 35px;
  width: 80px;
  background-color: #fff;
  color: black;
  margin-right: 50px;
}
</style>